iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

React 30 天學習歷程系列 第 2

【Day 2】常見的 React 框架及安裝方式

  • 分享至 

  • xImage
  •  

這一篇我會整理幾個常見的 React 框架以及他們的優缺點,另外會以 create-react-app 為範例紀錄安裝的步驟,並簡易介紹資料夾結構。

create-react-app

create-react-app 是 React 官方提供的 React 安裝方法,有以下的一些特性:
優點:

  • 快速生成 React 項目、構建及打包都方便快速
  • 支援使用 TypeScript
  • 支援多種 CSS 預處理器及框架
  • 官方維護
    缺點:
  • 不支援服務端渲染
  • 不支援 Webpack 拓展
  • 不支援修飾器(Decorator)等常用的 ES6 語法

Next.JS

Next.JS 是一個輕量的服務端渲染應用框架,有以下的一些特性:
優點:

  • 輕量、速度快
  • 支援服務端渲染
  • 自動化路由
    缺點:
  • 約束性較強
  • 路由必須按照規則書寫

Gatsby

Gatsby 是一個用於快速構建靜態網站的 React 框架,簡單易上手、並且支持服務端渲染,有以下的一些特性:
優點:

  • 可以快速生成靜態網站
  • 支援服務端渲染
  • 支援 graphql
  • 基於插件的完善的生態系統
    缺點:
  • 偏向於靜態站點,對於複雜應用較為吃力

UmiJS

UmiJS 是插件化的企業級前端應用框架,有以下的一些特性:
優點:

  • 集成了路由、狀態管理器、快速構建等功能、是一個完整的框架
  • 支援區塊的開發方式
  • 完善的插件系統
  • 配合 ant design pro,可快速構建管理後台
    缺點:
  • 不支援服務端渲染

使用 create-react-app 搭載項目

在課程中有分別教到 create-react-app、Next 及 Gatsby 的安裝方式,這篇文章中,我們先挑選官方的安裝方式來做範例。
首先我們間創建一個放置專案的資料夾

我們可以將資料夾拉到 VsCode 中開啟,然後用 VsCode 的終端機輸入安裝指令

npx create-react-app my-app

安裝完畢後用 cd fileName 指令移動到專案內,輸入 yarn startnpm start
如果有成功,終端機應該會出現這樣的畫面

同時也會在 http://localhost:3000/ 自動開啟 create-react-app 預設的頁面

目錄結構

package.json: npm 的配置文件
public: 有一個 index.html 是模板,favicon.ico 和 manifest.json 是跟預設配置及 icon 有關。
src: 開發目錄,大部分檔案會放在這個資料夾,裡面有一個 index.js 會接受頂層組建,並配置到 public 的 index.html 裡。

優化目錄結構

一般主要是在 src 裡面進行開發,首先在 src 中創建以下資料夾

  • pages 資料夾來存放元件
  • components 資料夾用來存放共用元件
  • assets 存放靜態資源(圖片之類的)
  • utils 存放工具用

接著我們可以整理一下 src 內原本的檔案,只要留下 index.js 就好,其他的檔案可放到對應的資料夾

  • App.js, APP.css, App.test.js 放置到 pages 資料夾,logo.svg 放置到 assets 資料夾,並修改檔案內原本的路徑
    全部整理完之後的結構應該如下圖

    另外我們可以在 index.css 中配置全域的 css,這邊我是使用 reset css

打包專案

當我們開發完專案後,通常會進行打包工作,指令為 yarn buildnpm build,完成後會多出一個 build 資料夾,裡面就是打包後的代碼,只要上傳到伺服器上面部署即可。

小結

這一篇主要是整理 React 常見的框架,另外也整理 create-react-app 的安裝方式及資料夾結構,下一篇開始會整理一些我個人不熟悉但 React 中常用的 ES6 語法。


上一篇
【Day 1 】前言 & 開發環境準備
下一篇
【Day 3】React 中常用的一些 ES6 語法 (一)
系列文
React 30 天學習歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言